<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-11 01:01:44
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:50:40
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>

  <div ref="right1_container" style="height:95%"></div>

</template>

<script>


import {Pie} from '@antv/g2plot'

export default {
    data(){
      return{
      dataArr:[
          { type: '学生返校', value: 19423 },
          { type: '学生未返校', value: 7003 },
          { type: '教职工返校', value: 4217 },
          { type: '教职工未返校', value: 253 },
      ] 
    }
    },
    mounted(){
      this.initData()
    },
    methods:{
      initData(){
        const piePlot = new Pie(this.$refs.right1_container, {
          appendPadding: 8,
          data:this.dataArr,
          angleField: 'value',
          colorField: 'type',
          radius: 1,
          label: {
            type: 'inner',
            offset: '-25%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
              fontSize: 12,
              textAlign: 'center',
            },
          }, 
          interactions: [{ type: 'element-active' }],
        });
        
      piePlot.render();
      }
    }
}
</script>

<style scoped>
</style>